<template>
    <div class="scss-container">
        <div class="box m-5 flex flex-items-center flex-justify-center">
            <ul>
                <li>八戒</li>
                <li>悟空</li>
            </ul>
            <div class="footer">
                底部
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
$color: green;
@import "../scss/mixin.scss";
@import "../scss/variable.scss";

// @mixin flex-c-c {
//     display: flex;
//     justify-content: center;
//     align-items: center;
// }

// @mixin border-radius {
//     border-radius: 10px;
//     box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
// }

.scss-container {
    padding: 10px;

    .box {
        border: 1px solid $color;

        ul {

            li {
                @include flex-c-c;
                height: 50px;
                color: skyblue;
                font-size: 30px;

                // &:引用父选择器
                &:hover {
                    background-color: #666;
                }
            }
        }

        .footer {
            @include flex-c-c;
            @include border-radius;
            height: $footer-height;
            border: 2px solid red;
            color: var(--btn-success-color);
        }
    }
}
</style>